<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
	<!-- c6 用的是一个 Div, 应该用一个 div, 然后不要限制 canvas 的高度 -->
		<title>走势图</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style type="text/css">
			html, body, .div-c-main {
				width:100%;
			}
			#dataContent {
				overflow:auto;
				-webkit-overflow-scrolling : touch;
				position: relative;
			}
			.div-c-tabBar {
				display:flex;
				flex-wrap:wrap;
				justify-content:center;
				background-color:white;
			}
			.div-c-tabItem {
				border-radius: 4px;
				border:1px solid #ddd;
				display:inline-block;
				font-size:16px;
				font-weight:bold;
				width:18%;
				margin:2px;
				text-align: center;
			}
			.div-c-tabItem-active {
				color:white;
				background-color:#059BF3;
				border:1px solid #059BF3;
			}
			.div-c-contentQihaoTitle {
				font-size:12px;
				display:flex;
				justify-content:center;
				align-items:center;
				flex:4;
			}
			#dataContent .div-c-qihaoTableItem:nth-child(odd) {
				background-color: rgb(221, 221, 221);
			}
			.div-c-qihaoTableItem {
				display:flex;
			}
			.div-c-contentQihaoTitleItem {
				display:inline-flex;
				justify-content:center;
				align-items:center;
				padding:2px;
				font-size:12px;
				flex:1;
				border-left:1px solid #bdbdbd;
			}
			.div-c-contentQihaoTitleItem > span {
				font-size:12px;
			}
			.div-c-hideNumber {
				color:#aaa;
			}
			.site-welcome {
				position: fixed;
				top:0;
				left:0;
				right:0;
				bottom:0;
				display: none;
				align-items:center;
				justify-content:center;
				background-color:#ded9d9;
				z-index: 300;
			}
			.site-welcome.active {
				display:flex;
			}
			.lotterNumber {
				color:#fff;
				background-color:#5891db;
				border-radius: 50%;
				padding:0;
				font-size:13px;
				width:5.5vw;
				height:5.5vw;
				max-width:25px;
				max-height:25px;
				display:inline-flex;
				justify-content:center;
				align-items:center;
				z-index:2;
			}
			.canvas-c-qiuLine {
				position: absolute;
				top:0;
				left:0;
			}
			.div-c-contentDataDiv {
				position: relative;
			}
			/*div-c-tabItem-active*/
	.loaddingCircle {
	    width: 200px;
	    height: 200px;
	    position: relative;
	}

.loaddingCircle::before, .loaddingCircle::after {
    content: '';
    width: 200px;
    height: 200px;
    background-color: rgba(73, 143, 199, 1);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    margin: auto;
    opacity: 0;
    border-radius: 50%;
/*      -webkit-animation-name: bigger;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-backface-visibility: hidden;  */
    -webkit-animation:bigger 1.5s linear infinite;
}

@-webkit-keyframes bigger {
    from {
		-webkit-transform:scale(0);
        opacity: 1;
    }
    to {
       -webkit-transform:scale(1);
        opacity: 0;
    }
}

 .loaddingCircle::after {
    -webkit-animation-delay: 0.4s;
}			
.div-c-headerWrapper {
	/* position: fixed; */
	position: fixed;
	width:100%;
	top:0;
	z-index:250;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	left:50%;
}
.div-c-tabItem {
	cursor: pointer;
}
.div-c-main, .div-c-headerWrapper {
	max-width:690px;
	margin: 0 auto;
}
		</style>
	</head>
	<body style="background: #F1F1F1 ;">
        <div class="site-welcome active">
            <div class="loaddingCircle"></div>
        </div>	
        
		<div class="div-c-main">
			<div class="div-c-headerWrapper" style="padding-left:0;padding-right:0;">
				<div class="text-center bg-theme" style="font-size:16px;height: 50px;display:flex;align-items:center;justify-content:center;margin-top: 0px;left: 0px;z-index: 100;position: relative;">
					<a onclick="back()" class="glyphicon glyphicon-chevron-left" style="color: white;position:absolute;left:10px;top:50%;transform:translateY(-50%);"></a>
					<strong style="font-size: 20px;" id="strong-i-name"></strong>
				</div>
				<div class="div-c-tabBar">
				</div>	
			</div>
			<div class="" id="dataContent" style="">
				<canvas class="canvas-c-qiuLine"></canvas>
			</div>
		</div>	
	</body>
	<script type="text/javascript">
	 	var tabObj = {
				"1": {"tab": ["一位", "二位", "三位", "四位", "五位","六位", "七位", "八位", "九位", "十位"], "qiushu": [1,2,3,4,5,6,7,8,9,10],"lotter":["01","02","03","04","05","06","07","08","09","10"]},
				"2": {"tab": ["万","千","百","十","个"], "qiushu": [0,1,2,3,4,5,6,7,8,9],"lotter":["0","1","2","3","4","5","6","7","8","9",]},
				"5": {"tab":["万","千","百","十","个"], "qiushu": [1,2,3,4,5,6,7,8,9,10,11],"lotter":["01","02","03","04","05","06","07","08","09","10","11"]},
				"6": {"tab":["香港"]},
				"7": {"tab":["百","十","个"], "qiushu": [0,1,2,3,4,5,6,7,8,9],"lotter":["0","1","2","3","4","5","6","7","8","9",]},
				"8": {"tab":["百","十","个"], "qiushu": [1,2,3,4,5,6,],"lotter":["1","2","3","4","5","6"]},
		}
	 	var CAIZHONG_STATE
	 	var CAIZHONG_NAME = ""
 		var setRestHeight = function() {
 			var allHeight = document.documentElement.clientHeight
 			var headerHeight = document.querySelector(".bg-theme").clientHeight
 			var tabHeight = document.querySelector(".div-c-tabBar").clientHeight
 			var restHeight = allHeight - headerHeight - tabHeight
 			document.querySelector("#dataContent").style.height = restHeight + "px"
 		}
	 	window.onload=function () {
		    document.addEventListener('touchstart',function (event) {
		        if(event.touches.length>1){
		            event.preventDefault();
		        }
		    })
		    var lastTouchEnd=0;
		    document.addEventListener('touchend',function (event) {
		        var now=(new Date()).getTime();
		        if(now-lastTouchEnd<=300){
		            event.preventDefault();
		        }
		        lastTouchEnd=now;
		    },false)
		}
		
	 	var ALL_DATA
	 	
	 	// 3
	 	// 0 - 1
	 	// 1 - 2
	 	
 		function drawLine(x1, y1, x2, y2) {
	 		var selfHeight = (document.documentElement.clientWidth * 0.055)
	 		if (selfHeight > 25) {
	 			selfHeight = 25
	 		}
	 		selfHeight = selfHeight / 2
	 		var moreHeight = document.querySelector("#dataContent").offsetTop
 			var CANVAS_CONTEXT = document.querySelector(".canvas-c-qiuLine").getContext("2d")
		    CANVAS_CONTEXT.lineWidth = 3 //lineWidth
		    CANVAS_CONTEXT.lineJoin = "round" //是 canvas 画板让笔更加连续
		    CANVAS_CONTEXT.lineCap = "round"
		    CANVAS_CONTEXT.stfillStyle = "rgb(88,145,217)"
		    CANVAS_CONTEXT.strokeStyle = "rgb(88,145,217)"
		    CANVAS_CONTEXT.beginPath();
	 		var xOffsetValue = document.querySelector(".div-c-main").offsetLeft
		    CANVAS_CONTEXT.moveTo(x1 + selfHeight - xOffsetValue, y1 - moreHeight + selfHeight) // 起点
		    CANVAS_CONTEXT.lineTo(x2 + selfHeight - xOffsetValue, y2 - moreHeight + selfHeight) // 终点
		    CANVAS_CONTEXT.stroke()
		    CANVAS_CONTEXT.closePath()
		} 	
		var bindTabItemEvent = function() {
			$(".div-c-tabBar .div-c-tabItem").on(getEndClickEvent(), function(event) {
				$(".div-c-tabItem-active").removeClass("div-c-tabItem-active")
				$(event.target).addClass("div-c-tabItem-active")
				$(".lotterNumber").removeClass("lotterNumber").each(function(index, element) {
					$(element).text($(element).closest(".div-c-lotterNumberDiv").index() - 1)
				})
				setLotterNumber(Number(event.target.dataset.index))
				var allHighLightItems = document.querySelectorAll(".lotterNumber")
				for (var j = 0; j < allHighLightItems.length; j++) {
				if ((j + 1) == allHighLightItems.length) {
					break
				}
				drawLine($(allHighLightItems[j]).offset().left, $(allHighLightItems[j]).offset().top,  $(allHighLightItems[j + 1]).offset().left, $(allHighLightItems[j + 1]).offset().top)
			}					
			})
		}
		
		
		var setLotterNumber = function(index) {
			for (var i = 0; i < ALL_DATA.length; i++) {
				var lotterResult = ALL_DATA[i].lotternumber
				var lotterArray = lotterResult.slice(0, lotterResult.length - 1).split(",")
				var qiuItem = lotterArray[index]
				var qiuIndex = tabObj[CAIZHONG_STATE].lotter.indexOf(qiuItem)
				var spanElement = $("#dataContent").find(".div-c-lotterNumberDiv")[i].querySelectorAll(".div-c-hideNumber")[qiuIndex].querySelector("span")
				spanElement.classList.add("lotterNumber")
				if (qiuItem[0] == "0" && qiuItem.length > 1) {
					qiuItem = qiuItem.slice(1, qiuItem.length)
				}
				spanElement.textContent = qiuItem
			}
			var cans = document.querySelector("#dataContent").querySelector(".canvas-c-qiuLine")
			var w = document.querySelector("#dataContent").clientWidth
			var h = document.querySelector("#dataContent").clientHeight 
			cans.width = w
			cans.height = h
		}
		
		var lineAllLotterNumber = function() {
			$(".div-c-contentDataDiv").each(function(index, element) {
				var canvas = "<canvas class='canvas-c-qiuLine'></canvas>"
				$(element).append(canvas)
			})
		}
		
		var setHaoMaData = function() {
			var documentFragment = document.createDocumentFragment()
			for (var i = 0; i < ALL_DATA.length; i++) {
				var temp = ""
				/* var lotterNum = arr[i].lotternumber
				lotterNum = lotterNum.slice(0, lotterNum.length - 1).split(",") */
				for (var j = 0; j < tabObj[CAIZHONG_STATE].qiushu.length; j++) {
					temp += "<span class='div-c-contentQihaoTitleItem div-c-hideNumber'><span></span></span>"
				}
				var div = document.createElement("div")
				div.className = "div-c-qihaoTableItem div-c-lotterNumberDiv"
				div.innerHTML = "<span class='div-c-contentQihaoTitle'>"+ ALL_DATA[i].period +"</span>" + temp
				documentFragment.appendChild(div)
			}
			$("#dataContent")[0].appendChild(documentFragment)
			$(".div-c-lotterNumberDiv").each(function(index, element) {
				var $Parent = $(element)
				$Parent.find(".div-c-hideNumber").each(function(index, element) {
					$(element).find("span")[0].textContent = $Parent.index() - 1
				})
			})			
			 setTimeout(function() {
	             var welcomeDiv = document.querySelector(".site-welcome")
	             welcomeDiv.classList.remove("active")				
			 }, 1000)
			$(".div-c-tabItem-active").trigger(getEndClickEvent())
		}
		
		var getHaoMaData = function() {
		 	var urlPath = "/caizhongjl.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {cname: CAIZHONG_NAME},
					success: function(data) {
						var newData = JSON.parse(data)
						ALL_DATA = newData.data
						setHaoMaData()
					},
					error: function(status) {
						console.log("status", status)
					}
				}
				ajax(newRequest)			
		}
		
		var createHaoMaDiv = function() {
/* 			$(".div-c-tabBar .div-c-tabItem").each(function(index, element) {
				var inx = element.dataset.index
				var html = "<div class='div-c-contentDataDiv' id='div-i-content" + inx + "'></div>"
				$("#dataContent").append(html)
			}) */
/* 			$("#dataContent .div-c-contentDataDiv").each(function(index, element) {
				var html = ""
				var dataArray = tabObj[CAIZHONG_STATE].qiushu
				for (var i = 0; i < dataArray.length; i++) {
					var temp = "<span class='div-c-contentQihaoTitleItem'>" + dataArray[i] + "</span>"
					html += temp
				}
				html = "<div class='div-c-qihaoTableItem'><span class='div-c-contentQihaoTitle'>期号</span>" + html + "</div>"
				element.insertAdjacentHTML("beforeend", html)
			}) */
			var html = ""
			var dataArray = tabObj[CAIZHONG_STATE].qiushu
			for (var i = 0; i < dataArray.length; i++) {
				var temp = "<span class='div-c-contentQihaoTitleItem'>" + dataArray[i] + "</span>"
				html += temp
			}
			html = "<div class='div-c-qihaoTableItem'><span class='div-c-contentQihaoTitle'>期号</span>" + html + "</div>"
			$("#dataContent").append(html)
			$("#dataContent").css("margin-top", (document.querySelector(".div-c-headerWrapper").clientHeight) + "px")
			getHaoMaData()
		}
 		
		var createHeaderAndTabItem = function() {
 			CAIZHONG_NAME = GetQueryString("caizhong")
 		 	var urlPath = "/lotter/zoushitu.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {cname: CAIZHONG_NAME},
					success: function(data) {
						var newData = JSON.parse(data)
						$("#strong-i-name").text(newData.data.name)
						CAIZHONG_STATE = newData.data.zoushitu
						var dataArray = tabObj[CAIZHONG_STATE]["tab"]
						for (var i = 0; i < dataArray.length; i++) {
							var item = dataArray[i]
							var html = "<span class='div-c-tabItem' data-index='" + i + "'>" + item + "</span>"
							$(".div-c-tabBar").append(html)
						}
						$(".div-c-tabBar .div-c-tabItem:first-child").addClass("div-c-tabItem-active")
						//setRestHeight()
						createHaoMaDiv()
						bindTabItemEvent()
					},
					error: function(status) {
						console.log("status", status)
					}
				}
				ajax(newRequest)			
 		}
		
		var setInitialHeight = function() {
			//console.log("hehe", document.querySelector(".div-c-tabBar").clientWidth)
			//document.querySelector(".div-c-main").style.width = document.querySelector(".div-c-tabBar").clientWidth + "px"
			//document.querySelector(".div-c-main").style.marginLeft = "auto"
			//document.querySelector(".div-c-main").style.marginRight = "auto"
		}
	
		var __main = function() {
			//setInitialHeight()
 			createHeaderAndTabItem()
 		}
 		
 		__main()
	</script>
</html>